// 主题色
$theme: #fff;

page {
	width: 100%;
	// min-height: 100vh;
	height: 100%;
	box-sizing: border-box;
	background-color: $theme;
}
::v-deep .u-button{
	border-radius: 100rpx !important;
}
.nav-bar{
	width: 100%;
	position: absolute;
	z-index: 999;
	.nav-title{
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 56rpx;
			height: 56rpx;
			margin-right: 8rpx;
		}
	}
}
	.u-loadmore {
			// display: flex;
			// justify-content: flex-end !important;
		}
.bttitle{
		text-align: center;
		line-height: 48px;
		color: #000;
		letter-spacing: 5rpx;
		.u-icon{
			position: absolute;
			left: 20rpx;
			top: 120rpx;
		}
	}
	.content {
		// width: 90%;
		// margin: 0 auto;
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center !important;
		padding: 20rpx;
	
		.screen-bar {
			background-color: transparent !important;
			height: 62rpx !important;
	
			.screen-bar-item {
				width: 160rpx !important;
				height: 52rpx !important;
				background: linear-gradient(90deg, #EA724D 0%, #E9403E 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #fff !important;
				margin-right: 30rpx;
			}
		}
	}
	
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	
	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
.address-popup {

			h2 {
				margin: 30rpx 0 70rpx 0;
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				text-align: center;
			}

			.a-l {
				height: 780rpx;
				overflow: auto;

				.a-d {
					display: flex;
					margin-bottom: 44rpx;
					padding: 28rpx;
					box-sizing: border-box;
				}
				.u-icon{
					margin-right: 22rpx;
				}
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 22rpx;
					margin-left: 40rpx;
					margin-top: 8rpx;
				}

				h4 {
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;

					span {
						display: inline-block;
						font-weight: 500;
						font-size: 26rpx;
						color: #666666;
						// margin: 10rpx 0 44rpx 0;
						margin-top: 10rpx;
					}
				}
			}

			.btn {
				padding: 30rpx 0;
				box-sizing: border-box;

				.u-button {
					width: 90%;
					border-radius: 100rpx !important;
				}
			}
		}
::v-deep .u-swiper__wrapper__item__wrapper{
				width: 100% !important;
				height: 100% !important;
			}
			::v-deep .u-swiper__wrapper__item__wrapper__image{
				max-width: 100% !important;
			}
::v-deep .indicator {
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
				}
			}
		}
::v-deep .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
::v-deep .u-popup{
	.specification-popup{
		position: relative;
		padding: 80rpx 28rpx 10rpx;
		box-sizing: border-box;
		.guanbi{
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
		.big-goods{
			display: flex;
			align-items: center;
			image{
				width: 172rpx;
				height: 162rpx;
				margin-right: 24rpx;
				border-radius: 16rpx;
			}
			figcaption{
				height: 162rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.title{
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				margin: 0 !important;
			}
			.desc{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				/* 2.设置旧版弹性盒 */
				 display: -webkit-box;
				 /* 3. 控制行数*/
				 -webkit-line-clamp: 2;
				 /* 4. 设置子元素的排列方式  垂直排列*/
				 -webkit-box-orient: vertical;
				 /* 5.溢出隐藏 */
				 overflow: hidden;
			}
			.price{
				display: flex;
				// justify-content: flex-end;
				.new-price{
					font-weight: 700;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;
					b{
						font-size: 32rpx;
					}
				}
			}
		}
		
		.spe-box{
			
			h3{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 28rpx;
				margin-top: 28rpx;
			}
			.s-b-l{
				display: flex;
				span{
					padding: 12rpx 20rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					background-color: #eee;
					color: #999;
					margin: 0 28rpx 28rpx 0;
					font-weight: 700;
					font-size: 28rpx;
				}
				.avtive-fig{
					background: #FA5151 !important;
					color: #fff !important;
				}
				p{
					font-weight: 400;
					font-size: 28rpx;
					color: #999;
					margin-bottom: 28rpx;
				}
			}
			
		}
		.num-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 28rpx;
			h3{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 28rpx;
			}
			
			
		}
		.button-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.u-button{
				width: 45%;
				border-radius: 50rpx !important;
			}
		}
	}
}
// 文字效果
.uni-bold {
	font-weight: 700;
}

.uni-font-68 {
	font-size: 68rpx;
	font-weight: bold;
}

.uni-font-60 {
	font-size: 60rpx;
	font-weight: bold;
}

.uni-font-48 {
	font-size: 48rpx;
	font-weight: bold;
}

.uni-font-40 {
	font-size: 40rpx;
}

.uni-font-36 {
	font-size: 36rpx;
}

.uni-font-32 {
	font-size: 32rpx;
}

.uni-font-28 {
	font-size: 28rpx;
}

.uni-font-26 {
	font-size: 26rpx;
}

.uni-font-24 {
	font-size: 24rpx;
}

.uni-font-20 {
	font-size: 20rpx;
}

// 文字排版
.uni-text-center {
	text-align: center;
	align-items: center;
}

.uni-text-left {
	text-align: left;
}

.uni-text-right {
	text-align: right;
}

.uni-color-white {
	color: #fff;
}

.uni-color-gray2 {
	color: #ccc;
}

.uni-color-bule {
	color: #4b60e0;
}

.uni-color-eee {
	color: #eeeeee;
}

.uni-color-999 {
	color: #999999;
}

.uni-color-666 {
	color: #666666;
}

.uni-color-333 {
	color: #333333;
}

.uni-color-yellow {
	color: #ffb783;
}

.uni-color-303 {
	color: #303030;
}

.uni-color-black {
	color: #000;
}

.uni-color-red {
	color: #ff0000;
}

.uni-text-indent {
	text-indent: 2em;
}

// 图片效果
image {
	flex-shrink: 0;
}

// 间距布局效果
// 垂直水平居中
.static {
	background: rgb(48, 48, 48);
	border: 2rpx solid #343d4f;
	color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
}

.static_content {
	background: rgb(59, 59, 59);
	padding: 20rpx 30rpx;
	border-radius: 20rpx;
}

.static_price {
	background: rgb(59, 59, 59);
	border-radius: 20rpx;
	width: 260rpx;
	padding: 20rpx;
}

.static_items {
	background: #303030;
	padding: 20rpx;
	border-radius: 12rpx;
}

.one_price_content {
	color: #fff;
	background-color: #303030;
	padding: 30rpx;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}

.static_money_content {
	background: #3b3b3b;
	padding: 20rpx 30rpx;
	border-radius: 8rpx;
}

.flex-row-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-row-between {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.flex-row-around {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.flex-column-around {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.flex-column-between {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.flex-column-space {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.flex-row-start {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

// 自定义内外边距
$margin: 30rpx;
$padding: 30rpx;

.mid_padding {
	padding: 0rpx 30rpx;
}

.uni_margin_top {
	margin-top: 20rpx;
}

.uni_margin_bottom {
	margin-bottom: 20rpx;
}

.uni_margin_left {
	margin-left: 20rpx;
}

.uni_margin_right {
	margin-right: 20rpx;
}

.uni_margin {
	margin: 40rpx 0;
}

.uni_margin_10 {
	margin: 10rpx 0;
}

.uni_margin_20 {
	margin: 20rpx 0;
}

.uni_margin_30 {
	margin: 30rpx 0;
}

// 标签样式
.uni-input {
	border-width: 0;
	border-radius: 12rpx;
	font-size: 32rpx;
	padding: 16rpx 20rpx;
	font-weight: 700;
	text-align: center;
	background-color: #131922;
}

.u-button {
	border-radius: 20rpx !important;
}

.u-box-shadow {
	box-shadow: 0px 0px 20px 5px #36566a inset;
}

.u-radius {
	border-radius: 100rpx !important;
}

.login-logo {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	overflow: hidden;
}
.search-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 4rpx 6rpx;
			box-sizing: border-box;
			.left{
				display: flex;
				align-items: center;
				.ipt{
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
					
				.input-placeholder{
					color: #999999;
				}
			}
			.search-btn{
				width: 116rpx;
				height: 52rpx;
				background: #2B85FF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
				line-height: 52rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.u-loadmore__content__text{
			span{
				font-size: 12rpx !important;
			}
		}
		.empty-box{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top: 70rpx;
			image{
				max-width: 60%;
				margin-bottom: 50rpx;
			}
			p{
				margin-top: 16rpx;
				font-size: 23rpx;
				color: #4DA1FF;
				padding: 7rpx 33rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				border: 1rpx solid #4DA1FF;
				text-align: center;
				line-height: 42rpx;
			}
		}
		.form-box{
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
			
			.item-li{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				.label{
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					font-family: 'hm-os-text';
				}
				.ipt {
					text-align: right;
					color: #333;
					font-size: 24rpx;
					font-family: 'hm-os-med';
				}
				
				.input-placeholder {
					color: '#999999';
					font-size: 24rpx;
					font-family: 'hm-os-text';
				}
			}
			.bor{
				border-bottom: 1rpx solid #ddd;
			}
			
		}
		.goods .goods_item .goods_item_name {
			font-size: 24rpx !important;
			color: #000000;
			font-family: 'hm-os-med';
			margin-top: 18rpx;
			font-weight: 500rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
			text-align: center;
		}
		.sel-container{
			.title{
				height: 126rpx;
				width: 100%;
				font-size: 35rpx;
				color: #000000;
				font-family: 'biaoti';
				line-height: 96rpx;
				text-align: center;
			}
			.popup-container{
				padding: 0 33rpx;
				box-sizing: border-box;
				position: relative;
				.u-icon{
					position: absolute;
					right: 30rpx;
					bottom: 20rpx;
				}
				.tabs{
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 40rpx 0;
					span{
						width: 146rpx;
						text-align: center;
						font-size: 28rpx;
						color: #999;
					}
				}
				.active-tab{
					color: #8551EB !important;
					font-family: 'biaoti' !important;
				}
				.goods-ul{
					height: 900rpx;
					.goods-item {
						display: flex;
						align-items: center;
						background-color: #fff;
						margin-bottom: 20rpx;
						padding: 28rpx 20rpx;
						box-sizing: border-box;
						border-radius: 27rpx;
						.shop-info{
							display: flex;
						}
						.img-box {
							width: 175rpx;
							height: 175rpx;
							margin-right: 20rpx;
							background-color: #f7f7f7;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 17rpx;
					
							.goods-img {
								max-width: 80%;
							}
						}
					
						.right {
							h2 {
								font-size: 28rpx;
								color: #000000;
								font-family: 'biaoti';
								display: flex;
								align-items: center;
					
								span {
									margin-left: 8rpx;
									padding: 4rpx 8rpx;
									box-sizing: border-box;
									color: #fff;
									font-size: 20rpx;
									font-family: 'hm-os-text';
									background-color: #8551EB;
									border-radius: 8rpx;
								}
							}
					
							p {
								font-size: 21rpx;
								color: #000000;
								font-family: 'hm-os-med';
								margin: 16rpx 0 51rpx;
							}
					
							.add-cart {
								display: flex;
								justify-content: space-between;
								align-items: center;
					
								.price {
									display: flex;
									align-items: center;
					
									b {
										font-size: 22rpx;
										color: #F21331;
										font-family: 'hm-os-label';
									}
					
									span {
										font-size: 40rpx;
										color: #F21331;
										font-family: 'biaoti';
										transform: translateY(-5rpx);
									}
					
									.ori-price {
										text-decoration: line-through;
										font-size: 24rpx;
										color: #666;
										font-family: 'hm-os-text';
										margin-left: 8rpx;
									}
								}
					
								image {
									width: 44rpx;
									height: 44rpx;
								}
							}
						}
					}
				}
			}
		}

	.empty {
		height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.emptybth {
			margin-top: 40rpx;
			width: 212rpx;
			height: 76rpx;
			background: #FFF;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			border: 1rpx solid #4DA1FF;
			font-family: hm-os-label;
			font-size: 28rpx;
			color: #4DA1FF;
			line-height: 76rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}